<template>
  <p class="p">医美定制</p>
  <van-grid :column-num="4" :border="false" icon-size="58px">
    <van-grid-item
      v-for="(item, index) in data.list"
      class="vanimg"
      :key="index"
      :icon="item.url"
      :text="item.msg"
    />
  </van-grid>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const data = reactive({
      list: [
        {
          url: "http://121.40.124.132:3000/images/cus/yimei1.png",
          msg: "美白淡斑",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei2.png",
          msg: "祛痘去闭口",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei3.png",
          msg: "去黑头",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei4.png",
          msg: "抗初老",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei5.png",
          msg: "抗衰除皱",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei6.png",
          msg: "舒敏去红",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei7.png",
          msg: "眼部问题",
        },
        {
          url: "http://121.40.124.132:3000/images/cus/yimei8.png",
          msg: "缩毛孔",
        },
      ],
    });
    return {
      data,
    };
  },
};
</script>

<style lang="less" scoped>
.p {
  font-size: 16px;
  font-weight: 900;
  margin-left: 16px;
  margin-bottom: 10px;
  margin-top: 30px;
}
span {
  font-size: 10pt;
  margin-top: 14.5px;
  font-weight: 900;
}
</style>
